<template>
	<el-aside :width=" isCollapse? '64px':'200px'">
		<!--侧边栏展开折叠开关  -->
		<div class="toggle-button" @click="toggleCollapse">|||</div>
		<el-menu :default-active="this.$route.path" class="el-menu-vertical-demo" menu-trigger="click"
			background-color="#333744" text-color="#fff" active-text-color="#409EFF" router :collapse="isCollapse"
			:collapse-transition="false" :unique-opened="true" v-if="identity === 'super'">
			<el-menu-item index="/index">
				<i class="el-icon-s-home"></i>
				<span slot="title">首页</span>
			</el-menu-item>
			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-s-shop"></i>
					<span>商户管理</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/super/merchants/list">
						<i class="el-icon-s-grid"></i>
						<span>商户列表</span>
					</el-menu-item>
					<el-menu-item index="/super/merchants/audit-list">
						<i class="el-icon-s-grid"></i>
						<span>审核列表</span>
					</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			<el-menu-item index="/super/order/list">
				<i class="el-icon-s-order"></i>
				<span slot="title">订单管理</span>
			</el-menu-item>
			<el-submenu index="2">
				<template slot="title">
					<i class="el-icon-s-check"></i>
					<span>代理管理</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/super/agent/list">
						<i class="el-icon-s-flag"></i>
						<span>代理列表</span>
					</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group>
					<el-menu-item index="/super/agent/audit-list">
						<i class="el-icon-s-flag"></i>
						<span>审核列表</span>
					</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group>
					<el-menu-item index="/super/agent/drawal">
						<i class="el-icon-s-flag"></i>
						<span>提现审核</span>
					</el-menu-item>
				</el-menu-item-group>
			</el-submenu>

			<el-submenu index="3">
				<template slot="title">
					<i class="el-icon-s-check"></i>
					<span>账号管理</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/super/account/merchant-list">
						<i class="el-icon-s-flag"></i>
						<span>商户登录账号</span>
					</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group>
					<el-menu-item index="/super/account/agent-list">
						<i class="el-icon-s-flag"></i>
						<span>代理登录账号</span>
					</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			
			<el-submenu index="4">
				<template slot="title">
					<i class="el-icon-s-promotion"></i>
					<span>小程序管理</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/minapp/banner/create">
						<i class="el-icon-s-flag"></i>
						<span>得到banner列表</span>
					</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group>
					<el-menu-item index="/minapp/activity/list">
						<i class="el-icon-s-flag"></i>
						<span>得到活动列表</span>
					</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group>
					<el-menu-item index="/minapp/shop/list">
						<i class="el-icon-s-flag"></i>
						<span>得到店铺列表</span>
					</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group>
				<el-menu-item index="/minapp/class/list">
					<i class="el-icon-s-flag"></i>
					<span>得到分类列表</span>
				</el-menu-item>
				</el-menu-item-group>
				
<!-- 				<el-menu-item-group>
					<el-menu-item index="/super/account/agent-list">
						<i class="el-icon-s-flag"></i>
						<span>代理登录账号</span>
					</el-menu-item>
				</el-menu-item-group> -->
				
			</el-submenu>

			<el-menu-item index="/super/key/list">
				<i class="el-icon-s-finance"></i>
				<span slot="title">密钥管理</span>
			</el-menu-item>
			<el-menu-item index="/query-bank-number">
				<i class="el-icon-search"></i>
				<span slot="title">查联行号</span>
			</el-menu-item>
		</el-menu>
		<el-menu :default-active="this.$route.path" class="el-menu-vertical-demo" menu-trigger="click"
			background-color="#333744" text-color="#fff" active-text-color="#409EFF" router :collapse="isCollapse"
			:collapse-transition="false" :unique-opened="true" v-else-if="identity === 'agent'">
			<el-menu-item index="/index">
				<i class="el-icon-s-home"></i>
				<span slot="title">代理首页</span>
			</el-menu-item>
			<el-submenu index="2">
				<template slot="title">
					<i class="el-icon-s-shop"></i>
					<span>商户管理</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/agent/merchants/list">
						<i class="el-icon-s-grid"></i>
						<span>商户列表</span>
					</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			<el-submenu index="3">
				<template slot="title">
					<i class="el-icon-s-shop"></i>
					<span>订单管理</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/agent/order/list">
						<i class="el-icon-s-grid"></i>
						<span>订单列表</span>
					</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			<el-submenu index="4">
				<template slot="title">
					<i class="el-icon-s-shop"></i>
					<span>个人信息</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/agent/share/info">
						<i class="el-icon-s-grid"></i>
						<span>个人信息</span>
					</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group>
					<el-menu-item index="/agent/share/income">
						<i class="el-icon-s-grid"></i>
						<span>收入明细</span>
					</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group>
					<el-menu-item index="/agent/share/drawal">
						<i class="el-icon-s-grid"></i>
						<span>支出明细</span>
					</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
		</el-menu>
		<el-menu :default-active="this.$route.path" class="el-menu-vertical-demo" menu-trigger="click"
			background-color="#333744" text-color="#fff" active-text-color="#409EFF" router :collapse="isCollapse"
			:collapse-transition="false" :unique-opened="true" v-else-if="identity === 'master'">
			<el-menu-item index="/index">
				<i class="el-icon-s-home"></i>
				<span slot="title">商户首页</span>
			</el-menu-item>
			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-menu"></i>
					<span>订单管理</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/merchant/order-list">
						<i class="el-icon-tickets"></i>
						<span>订单列表</span>
					</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			<el-menu-item index="/merchant/userinfo">
				<i class="el-icon-s-check"></i>
				<span slot="title">商户信息</span>
			</el-menu-item>
		</el-menu>
	</el-aside>
</template>

<script>
	export default {
		data() {
			return {
				identity: "master",
				// 是否折叠
				isCollapse: false,
			};
		},
		methods: {
			// 点击菜单按钮 控制展开与关闭
			toggleCollapse() {
				this.isCollapse = !this.isCollapse;
			},
			//防止logo页层级被遮挡，因为popper层级会叠加
			popoverHandle() {
				document.querySelector(".popper").style.zIndex = 1000;
			},
			setStatus() {
				let userInfo = JSON.parse(window.localStorage.userInfo);

				if (userInfo) {
					let type = userInfo.userType;
					if (type === "super") {
						this.identity = "super";
					} else if (type === "agent") {
						this.identity = "agent";
					} else {
						this.identity = "master";
					}
				} else {
					this.$router.push("/login");
				}

			},
		},
		watch: {
			$route(to, from) {
				this.setStatus();
			},
		},
		created(e) {
			this.setStatus();
		},
	};
</script>

<style scoped>
	.toggle-button {
		background-color: #4a5064;
		font-size: 10px;
		line-height: 24px;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
	}
</style>
